<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();//获得当前的项目根目录路径赋值给path
%>
<jsp:include page="/WEB-INF/jsp/common/header.jsp"></jsp:include>
<link rel="stylesheet" href="<%=path%>/static/css/page.css" />
<style>
    /* 失物展示样式 */
    .lost-items-container {
        padding: 10px;
    }

    .lost-items-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 20px;
        justify-items: center;
    }

    .lost-item-card {
        width: 100%;
        max-width: 200px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        overflow: hidden;
    }

    .lost-item-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    .item-image {
        width: 100%;
        height: 180px;
        overflow: hidden;
    }

    .item-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

    .lost-item-card:hover .item-image img {
        transform: scale(1.05);
    }

    .item-info {
        padding: 12px;
        text-align: center;
    }

    .item-name {
        display: block;
        font-size: 16px;
        font-weight: bold;
        color: #333;
        margin-bottom: 5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .item-date {
        display: block;
        font-size: 12px;
        color: #888;
    }

    /* 分页样式调整 */
    .pagelist {
        margin-top: 30px;
        text-align: center;
        padding: 20px 0;
    }

    /* 搜索表单样式 */
    .search-form {
        background: #f8f8f8;
        padding: 15px;
        border-radius: 5px;
        margin-bottom: 20px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }

    .search-form .layui-input-inline {
        margin-right: 0;
    }
</style>
<body>
<!--nav start-->
<jsp:include page="/WEB-INF/jsp/common/nav.jsp"></jsp:include>
<!--inside content start-->

<div class="inside_wrap">
    <div class="inside_con">
        <div class="adr">
            <a href="index.html">首页</a>&nbsp;>&nbsp;失物大厅&nbsp;
        </div>
        <div class="search-form">
            <form action="<%=path%>/client/swdt" method="post" id="searchForm">
                <input type="hidden" name="pageNum" id="pageNum">
                <div class="layui-form-mid">关键词:</div>
                <div class="layui-input-inline" style="width: 150px;">
                    <input type="text" name="goods_name" placeholder="失物名称" value="${requestScope.record.goods_name}" style="height:33px;"  class="layui-input">
                </div>

                <div class="layui-input-inline" style="width: 150px;">
                    <input type="text" name="create_date" placeholder="拾到日期" id="create_date" value="${requestScope.record.create_date}" style="height:33px;"  class="layui-input">
                </div>
                <input type="hidden" name="pageSize" id="pageSize" value="${pageInfo.pageSize }">

                <button type="submit" class="layui-btn layui-btn-normal layui-btn-sm">查询</button>
            </form>
        </div>
        <div class="inside_box">
            <div class="ic_wrap" style="width: 100%;">
                <div class="lost-items-container">
                    <c:if test="${requestScope.pageInfo.list!=null}">
                        <div class="lost-items-grid">
                            <c:forEach items="${requestScope.pageInfo.list}" var="row">
                                <div class="lost-item-card">
                                    <a href="<%=path%>/goods/detail?id=${row.id}">
                                        <div class="item-image">
                                            <img src="<%=path%>/upload/${row.goods_img}" alt="${row.goods_name}" onerror="this.src='<%=path%>/static/images/default-item.png'"/>
                                        </div>
                                        <div class="item-info">
                                            <span class="item-name">${row.goods_name}</span>
                                        </div>
                                    </a>
                                </div>
                            </c:forEach>
                        </div>
                    </c:if>
                    <c:if test="${requestScope.pageInfo.list == null || requestScope.pageInfo.list.size() == 0}">
                        <div class="no-result" style="text-align: center; padding: 50px; color: #999;">
                            暂无失物信息
                        </div>
                    </c:if>
                </div>

                <!--分页-->
                <div class="pagelist">
                    <c:if test="${requestScope.pageInfo.list != null && requestScope.pageInfo.list.size() > 0}">
                        <div class="pagelist">
                            共有${pageInfo.total }条记录共${pageInfo.pages }页，每页
                            <select name="pageSize" onchange="changePageSize(this.value)" style="width: 50px;">
                                <option value="5" ${pageInfo.pageSize==5?"selected":"" }>5</option>
                                <option value="10"  ${pageInfo.pageSize==10?"selected":"" }>10</option>
                                <option value="15"  ${pageInfo.pageSize==15?"selected":"" }>15</option>
                                <option value="20"   ${pageInfo.pageSize==20?"selected":"" }>20</option>
                            </select>

                            <a href="javascript:doPage(1)">首页</a>

                            <a href="javascript:doPage(${requestScope.pageInfo.pageNum -1})">上一页</a>

                            <c:if test="${pageInfo.pageNum<pageInfo.pages}">
                                <a href="javascript:doPage(${requestScope.pageInfo.pageNum +1})">下一页</a>
                            </c:if>
                            <a href="javascript:doPage(${requestScope.pageInfo.pages})">尾页</a>

                            转到<select name="pageNum" onchange="doPage(this.value)" style="width: 50px;">
                            <c:forEach begin="1" end="${pageInfo.pages }" var="i">
                                <option class="option" value=${i }  ${pageInfo.pageNum==i?"selected":"" }>${i }</option>
                            </c:forEach>
                        </select>
                        </div>
                    </c:if>
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </div>
</div>
<!--footer start-->
<jsp:include page="/WEB-INF/jsp/common/footer.jsp"></jsp:include>
<script src="<%=path%>/static/js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="<%=path%>/static/js/jquery.SuperSlide.2.1.js" type="text/javascript"></script>
<script src="<%=path%>/static/js/common.js"></script>
<script src="${pageContext.request.contextPath}/static/layuiadmin/layui/layui.js"></script>
<script>
    //Demo
    layui.use(['form','upload','jquery','laydate','layedit'], function() {
        var $ = layui.$
            , upload = layui.upload
            , form = layui.form
            , laydate = layui.laydate
            , layedit = layui.layedit;

        //执行一个laydate实例
        laydate.render({
            elem: '#create_date'//指定元素
        });
    });
</script>
<script>
    function doPage(pageNo) {
        document.getElementById("pageNum").value = pageNo;
        document.getElementById("searchForm").submit();
    }
    function changePageSize(cur_pageSize){
        document.getElementById("pageSize").value=cur_pageSize;
        document.getElementById("searchForm").submit();//表单提交
    }
</script>
</body>
</html>